<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>辅助类</title>
	<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
	<style>
		div {
			font-size: 30px;
			font-weight: bold;
		}

		.a {
			width: 200px;
			height: 50px;
			border: 1px solid #ccc;
			background-color: #eee;
		}
	</style>
</head>
<body style="margin:50px;">
	<!-- 
	1.字体/背景颜色
		1)	.text-muted 			无.bg-muted
		2)	.text-primary 			.bg-primary
		3)	.text-info 				.bg-info 
		4)	.text-success 			.bg-success
		5)	.text-warning 			.bg-warning
		6)	.text-danger 			.bg-danger
	2.关闭按钮
		1)	.close 					html中应该是&times;才是正确的

	3.三角符号
		1)	.caret 					//对新建空span/div等添加

	4.快速浮动
		1)	.pull-left 				//左浮动
		2)	.pull-right 			//右浮动(不是push)
		3)	.center-block 			//(左边框)居中
	
	5.清除浮动
		1) 	.clearfix 				//对新建空div添加，掷于需要清除浮动的元素前面

	6.显示/隐藏
		1)	.show
		2)	.hide

	7.响应式显示/隐藏
		显示(可以指定需要显示的类型，也可以不用，按需)
			1)	.visible-xs-*
			2)	.visible-sm-*
			3)	.visible-md-*
			4)	.visible-lg-*
		隐藏(不需要指定隐藏类型)
			1)	.hidden-xs
			2)	.hidden-sm
			3)	.hidden-md
			4)	.hidden-lg

	 -->
	<!-- <div class="text-muted">柔和灰</div>
	<div class="text-primary bg-primary">原始蓝</div>
	<div class="text-info bg-info">信息蓝</div>
	<div class="text-success bg-success">成功绿</div>
	<div class="text-warning bg-warning">警告黄</div>
	<div class="text-danger bg-danger">危险红</div> -->
	
	<!-- 关闭按钮,只有样式无功能 -->
	<!-- <button class="close">&times;</button> -->

	<!-- 三角符号 -->
	<!-- <span class="caret"></span> -->

	<!-- 快速浮动 -->
	<!-- <div class="pull-left a">左</div>
		<div class="pull-right a">右</div>
		<div class="center-block a">中</div>
	-->

	<!-- 清除浮动 清除左3左4浮动 -->
	<!-- <div class="pull-left a">左1</div>
	<div class="pull-left a">左2</div>
	<div class="clearfix"></div>
	<div class="pull-left a">左3</div>
	<div class="pull-left a">左4</div> -->
	

	<!-- 超小屏激活显示 -->
 	<div class="visible-xs-block text-nowrap a">超小屏时激活显示</div>
	<div class="visible-xs-inline a">超小屏时激活显示</div>
	<div class="visible-xs-inline a">超小屏时激活显示</div>
		
	<!-- 超小屏激活显示 -->
	<!-- <div class="hidden-xs a">超小屏时激活隐藏</div> -->
	
	<script src="bootstrap-3.3.5-dist/jquery/jquery.min.js"></script>
	<script src="bootstrap-3.3.5-dist/bootstrap/bootstrap.min.js"></script>
</body>
</html>